<template>
  <div class="goodsFilter">
    <ul class="filter-box-left">
      <li
        @click="changePage(index)"
        :class="{ current: curPage === index }"
        v-for="(item, index) in filterData"
        :key="index"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="filter-box-right">
      <p v-if="curPage === 0" class="choose-list">
        <span @click="changeSort" :class="{ active: !curSort }">按热度</span>
        <span @click="changeSort" :class="{ active: curSort }">按字母</span>
      </p>
      <ul class="filter-item" v-if="curPage === 0 && !curSort">
        <li
          @click="changeSelect(item.id - 0)"
          :class="{ current_ok: curSelect === item.id - 0 }"
          v-for="(item, index) in filterData[curPage].hot_rows"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="filter-item" v-if="curPage === 0 && curSort">
        <div
          :class="{ current_ok: curSelect === index }"
          v-for="(item, index) in filterData[curPage].rows"
          :key="index"
        >
          <p v-if="index !== 0" class="letter-p">{{ item.letter }}</p>
          <ul>
            <li
              @click="changeCurSort(it.id - 0)"
              :class="{ current_ok: curSortId === it.id - 0 }"
              v-for="(it, i) in item.items"
              :key="i"
            >
              {{ it.name }}
            </li>
          </ul>
        </div>
      </div>
      <ul class="filter-item" v-if="curPage === 1">
        <li
          @click="changeOrigin(item.id - 0)"
          :class="{ current_ok: curOrigin === item.id - 0 }"
          v-for="(item, index) in filterData[curPage].rows"
          :key="index"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="btn-area">
      <div class="btn-goods">有<span class="c58">241</span>件商品</div>

      <div class="btn-reset" @click="reset">重置</div>
      <div class="btn-ok" @click="submit">确定</div>
    </div>
  </div>
</template>
 
<script>
import Vue from "vue";
import { Dialog } from "vant";

// 全局注册
Vue.use(Dialog);
export default {
  props: ["filterData"],
  data() {
    return {
      curPage: 0,
      curSelect: 0,
      curOrigin: 0,
      curSort: false,
      curSortId: 0,
      show: false,
    };
  },
  mounted() {
    // console.log(filterLeft);
  },
  computed: {},
  methods: {
    async _loadData() {
      let result = await this.$http.get({
        url: "/goods/list/main.html",
        params: {
          version: 358,
          brandid: 0,
          page: 1,
          orderby: "sold_desc",
          cateid: 722,
          pet_type: "cat",
          extend_pam: `brandid:${this.curSelect}|extends_str:${this.curOrigin}|real_wid:|region:`,
          system: "wap",
          isWeb: 1,
          distinct_id:
            " 17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7",
          _: 1609847397471,
        },
      });
      let { list } = result;
      let brandid = this.curSelect;
      let extends_str = this.curOrigin;
      this.$emit("filter", { list, brandid, extends_str });
    },
    changePage(index) {
      this.curPage = index;
    },
    changeSelect(id) {
      this.curSelect = id;
    },
    changeOrigin(index) {
      this.curOrigin = index;
    },
    changeSort() {
      this.curSort = !this.curSort;
    },
    changeCurSort(id) {
      this.curSortId = id;
    },
    reset() {
      // location.reload();
      Dialog.confirm({
        // title: "标题",
        message: "是否确认清空条件",
      })
        .then(() => {
          // on confirm
          location.reload();

        })
        .catch(() => {
          // on cancel
        });
    },
    async submit() {
      await this._loadData();
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>
 
<style scoped lang = "stylus">
.letter-p {
  background-color: #f6f6f6;
}

.goodsFilter {
  display: flex;
  position: relative;
  flex: 1;
  overflow: auto;
}

.filter-box-left {
  width: 25%;
  height: 100%;
  background: #f5f5f5;

  li {
    width: 100%;
    height: 0.35rem;
    font-size: 0.12rem;
    line-height: 0.35rem;
    text-align: center;
  }

  li.current {
    background: #fff;
  }
}

.filter-box-right {
  width: 75%;
  display: flex;
  flex-direction: column;
  height: 100%;

  .choose-list {
    padding: 8px 0 10px 0;
    text-align: center;

    span {
      display: inline-block;
      width: 40%;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border: 1px solid #f6f6f6;
      border-radius: 5px;
      background-color: #f6f6f6;
      color: #000;
      margin: 0 5px;
      font-size: 0.1rem;
    }

    span.active {
      color: #41C856;
      border: 1px solid #41C856;
      background-color: #fff;
    }
  }

  .filter-item {
    height: 100%;
    overflow: auto;
    width: 100%;
    padding-left: 0.1rem;
    padding-bottom: 0.6rem;

    li {
      height: 35px;
      line-height: 35px;
      position: relative;
      font-size: 12px;
    }

    li.current_ok:before {
      content: '';
      width: 30px;
      height: 30px;
      display: block;
      background: url('/img/brands-ico.dd8f5ea6.png') no-repeat -24px -671px;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

.btn-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  height: 0.51rem;
  font-size: 0.14rem;
  text-align: center;
  line-height: 0.51rem;

  .btn-goods {
    width: 25%;
    border-top: 1px solid #e7e7e7;
    background-color: #fff;
  }

  .btn-reset {
    width: 30%;
    border-top: 1px solid #e7e7e7;
    background-color: #fff;
    border-left: 1px solid #e7e7e7;
  }

  .btn-ok {
    width: 45%;
    border-top: 1px solid #41C856;
    background-color: #41C856;
    color: #fff;
  }
}
</style>